<script setup lang="ts">
import { router } from "@/router/index";
import { useUserStoreHook } from "@/store/modules/user";
import { AES_Decrypt, AES_Encrypt } from "@/utils/crypto";
import { message } from "@/utils/message";
import Cookies from "js-cookie";
import { onMounted, reactive, ref, watch } from "vue";
import { loginRules } from "./utils/rule";
defineOptions({
  name: "Login"
});
const ruleFormRef = ref();
const rememberPwd = ref(false);
const loading = ref(false);
const ruleForm = reactive({
  account: "",
  password: ""
});

watch(rememberPwd, newVal => {
  if (!newVal) {
    // 清空存储的值
    Cookies.remove("accountInfo");
  }
});

const getRememberPwd = () => {
  let accountInfo = Cookies.get("accountInfo");
  if (accountInfo) {
    let addcountObj = JSON.parse(AES_Decrypt(accountInfo));
    ruleForm.account = addcountObj.account;
    ruleForm.password = addcountObj.password;
    rememberPwd.value = true;
  } else {
    rememberPwd.value = false;
  }
};

onMounted(() => {
  getRememberPwd();
});

const onLogin = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;

      useUserStoreHook()
        .loginByUsername({
          account: ruleForm.account,
          password: ruleForm.password
        })
        .then(res => {
          console.log("res", res);
          if (res.success) {
            // 保存账号密码
            if (rememberPwd.value) {
              Cookies.set("accountInfo", AES_Encrypt(JSON.stringify(ruleForm)));
            }
            message("登录成功", { type: "success" });
            setTimeout(() => {
              router.push("/activityList");
            }, 200);
          } else {
            message("登录失败", { type: "error" });
          }
        })
        .finally(() => (loading.value = false));
    }
  });
};
</script>
<template>
  <div>
    <div class="login-box">
      <div class="login-form">
        <Motion>
          <h2 class="outline-none">管理員登入</h2>
        </Motion>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="loginRules"
          size="large"
        >
          <Motion :delay="100">
            <el-form-item
              :rules="[
                {
                  required: true,
                  message: '请输入ID',
                  trigger: 'blur'
                }
              ]"
              prop="account"
            >
              <div style="line-height: 25px; margin-left: 32px">ID</div>
              <div class="flex items-center w-full">
                <img src="@/assets/briefcase.png" width="16" height="16" />
                <el-input v-model="ruleForm.account" clearable class="ml-4" />
              </div>
            </el-form-item>
          </Motion>

          <Motion :delay="150">
            <el-form-item prop="password">
              <div style="line-height: 25px; margin-left: 32px">Password</div>
              <div class="flex items-center w-full">
                <img src="@/assets/lock.png" width="16" height="16" />
                <el-input
                  v-model="ruleForm.password"
                  clearable
                  show-password
                  class="ml-4"
                />
              </div>
            </el-form-item>
          </Motion>
          <Motion :delay="150">
            <el-form-item prop="">
              <el-checkbox
                v-model="rememberPwd"
                label="Remember Me"
                size="large"
              >
                <div class="ml-2">Remember Me</div>
              </el-checkbox>
            </el-form-item>
          </Motion>

          <Motion :delay="250">
            <el-button
              class="w-full mt-4 btn-login"
              type="primary"
              :loading="loading"
              @click="onLogin(ruleFormRef)"
            >
              Sign in
            </el-button>
          </Motion>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login-box {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.login-form {
  color: #4b4b4b;
  width: 450px;
  line-height: 30px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 80px 50px 50px 40px;
  background: #fff;
  box-shadow: 0px 4px 60px 0px #00000033;
  h2 {
    font-size: 32px;
    margin-bottom: 45px;
  }
  .btn-login {
    border-color: #9dbdba;
    background-color: #9dbdba;
    margin-top: 0px;
  }
}
:deep(.login-form .el-input__wrapper) {
  background-color: #f4f4f4;
}

:deep(.login-form .el-form-item__error) {
  margin-left: 30px;
}
</style>
